<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="contextPath" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset=UTF-8"">
<title>零售户户支付情况</title>
<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap.min.css" />
<link rel="stylesheet" href="${contextPath}/static/bootstrap/css/bootstrap-table.css" />
<link rel="stylesheet" href="${contextPath}/static/ace/assets/css/ace.css" />
<link rel="stylesheet" href="${contextPath}/static/bootstrap/css/bootstrap-select.css" />
<link rel="stylesheet" href="${contextPath}/static/statistics/css/jquery.treegrid.min.css">
<link rel="stylesheet" href="${contextPath}/static/statistics/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="${contextPath}/static/ztree/css/zTreeStyle.css" />
<script src="${contextPath}/static/statistics/js/jquery.js"></script>
<script src="${contextPath}/static/statistics/js/jquery.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap.min.js"></script>
<script src="${contextPath}/static/bootstrap/js/bootstrap-table.js"></script>
<script src="${contextPath}/static/bootstrap/js/bootstrap-table-zh-CN.js"></script>
<script src="${contextPath}/static/bootstrap/js/bootstrap-select.min.js"></script>
<script src="${contextPath}/static/bootstrap/js/bootstrap-table-treegrid.js"></script>
<script src="${contextPath}/static/statistics/js/jquery.treegrid.min.js"></script>
<script src="${contextPath}/static/bootstrap/js/defaults-zh_CN.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.min.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.fr.js"></script>
<script src="${contextPath}/static/statistics/js/bootstrap-datetimepicker.zh-CN.js"></script>
<script src="${contextPath}/static/ztree/js/jquery.ztree.core-3.5.js"></script>
<script src="${contextPath}/static/ztree/js/jquery.ztree.excheck-3.5.js"></script>
<script src="${contextPath}/static/util/dateutils.js"></script>
<script src="${contextPath}/static/util/protutils.js"></script>
<script src="${contextPath}/static/js/jQuery.print.js"></script>
<style type="text/css">
	input.combo-input{
		padding:7px 4px; 
	}
	.panel{
		margin-bottom:0px;	
	}
	.bs-actionsbox .btn-group button {
	    width: 45%;
	}
	.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
	    width: 100%;
	}	
	.list-group-item{
		padding:5px 6px;
		font-size:11px;
	}
	#zoneCode .list-group .list-group-item:first-child{
		padding:7px 6px;
	}
	.panel-heading::after {
	    content: "";
	    display: block;
	    clear: both;
	}
	.caret{
		color:#ABBAC3;
	}
	.bootstrap-select > .btn{
		color:#ABBAC3 !important;
		background-color: #fff !important;
		text-shadow:none;
		border-width:1px;
	}
	.bootstrap-select > .btn:hover, .bootstrap-select > .btn:focus:hover, .bootstrap-select > .btn.focus:hover, .bootstrap-select > .btn:active:hover, .bootstrap-select > .btn:focus:active, .btn-default:focus:active, .open > .btn.dropdown-toggle, .open > .btn-default.dropdown-toggle, .open > .btn.dropdown-toggle:hover, .open > .btn-default.dropdown-toggle:hover, .open > .btn.dropdown-toggle:focus, .open > .btn-default.dropdown-toggle:focus, .open > .btn.dropdown-toggle.focus, .open > .btn-default.dropdown-toggle.focus, .open > .btn.dropdown-toggle:active, .open > .btn-default.dropdown-toggle:active {
	    background-color: #fff !important;
	    border-color: #ABBAC3;
	}
	.fixed-table-footer{
	    overflow: auto;
	}	
	.dropdown-header{
		cursor: pointer;
	}
</style>
</head>
<body>
 <div class="panel panel-default">
 			<div class="panel-heading">
 				<h3 class="panel-title pull-left" style="text-shadow:2px 1px 2px #ABBAC3">跨行支付日结信息</h3>
 				<h5 class="pull-right" id="timeCount" style="margin-top: 0;margin-bottom: 0;"></h5>
 			</div>
            <div class="panel-body">
                <form class="form-horizontal" class="form-inline" style="margin-bottom: 5px;"
                      action="${contextPath}/ktcount/exportExcelIbcpDaily" method="post" id="exportExcel">
                    <input id="sortName" name="sortName" type="hidden" value="" />
                    <input id="sortOrder" name="sortOrder" type="hidden" value="asc">
                    <div class="form-group">
                        <div class="col-sm-2">
                            <select class="selectpicker" data-live-search="true" title="请选择大区" data-actions-box="true" id="meridSelect">
                                <option value="105440344580001">深圳市烟草公司(福田区)</option>
                                <option value="301440344580002">深圳市烟草公司(罗湖区)</option>
                                <option value="301440344580003">深圳市烟草公司(宝安区)</option>
                                <option value="301440344580004">深圳市烟草公司(盐田区)</option>
                                <option value="302440344581001">深圳市烟草公司(光明区)</option>
                                <option value="302440344581002">深圳市烟草公司(龙华区)</option>
                                <option value="302440344581003">深圳市烟草公司(南山区)</option>
                                <option value="302440344581004">深圳市烟草公司(大鹏区)</option>
                            </select>
                            <input type="hidden" name="merid" id="merid" />
                            <input type="hidden" name="meridName" id="meridName" />
                        </div>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" id="turnCreateDate" name="turnCreateDate" placeholder="查询开始时间" readonly />
                        </div>
                        <div class="col-sm-2">
                            <input type="text" class="form-control" id="bindCreateDate" name="bindCreateDate" placeholder="查询结束时间" readonly />
                        </div>
                        <div class="col-sm-1" style="text-align:left;">
                            <button type="button"  id="btn_query" class="btn btn-sm btn-info">查询</button>
                        </div>
                    </div>
                    <input type="hidden" id="colsTitles" name="colsTitles" />
                    <input type="hidden" id="colsFields" name="colsFields" />
                </form>
            </div>
        </div>      
 		<div id="toolbar" class="btn-group" style="margin-left:15px">
 			<button id="btn_refresh" type="button" class="btn btn-sm btn-warning">
                <span class="glyphicon glyphicon-refresh icon-refresh" aria-hidden="true"></span>刷新
            </button>
            <button onclick="exportExcel();" type="button" class="btn btn-sm btn-success">
                <span class="glyphicon glyphicon-file" aria-hidden="true"></span>导出
            </button>
            <button onclick="doPrint();" type="button" class="btn btn-sm btn-default">
                <span class="glyphicon glyphicon-print" aria-hidden="true"></span>打印
            </button>
            <button type="button" class="btn btn-sm btn-success"
				onclick="javascript:window.history.go(-2);window.close();">
				<span class="glyphicon glyphicon-arrow-left" aria-hidden="true"></span>返回</button>
        </div>         
       <!--startprint--> 
		<table id="kt_rpc"></table>
		<!--endprint-->
	
		</div>
</body>
<script type="text/javascript">
var ISNEEDREBUILD = false;
$(function () {
	//timeCount();
	initDatetimepicker([ "turnCreateDate", "bindCreateDate" ]);
	$('#meridSelect').on('changed.bs.select',onmeridChange);
    //1.初始化Table
	oTable.Init();
});

var TableInit = function () {
    var oTableInit = new Object();
    //初始化Table
    function sumCol(data,colName){
    	var count = 0;
    	for(var i=0;i<data.length;i++){
    		count+= parseFloat(data[i][colName])
    	}
    	var sval = $("#summaryType").val();
    	if(0 == sval)
    		return parseFloat(count.toFixed(2)/2);
    	else
    		return parseFloat(count.toFixed(2));
    }
    function removeJsonEle(OrgArr,filterArr,toFilterField){
    	var newArr = OrgArr;
    	for(j = 0,filterArrLen = filterArr.length;j < filterArrLen;j++){
	    	for(var i = 0,OrgArrLen = OrgArr.length;i < OrgArrLen;i++){
	    		if(OrgArr[i][toFilterField] == filterArr[j]){
	    			newArr = OrgArr.splice(i, 1); 
	    			break;
	    		}
	    	}
    	}
    	return OrgArr;
    }
    function triggerRemoveJsonEle(){
    	var OrgArr = [{
            field: 'CUSTMANAGER',
            title: '客户经理'
        },{
            field: 'PAYNEWHOUSETODAY',
            title: '今日支付新户数'
        },{
            field: 'CUMULATIVEPAYMENT',
            title: '累计支付数',
        }, {
            field: 'PAYMENTTODAY',
            title: '今日支付笔数',
        }, {
            field: 'CUMULATIVEPAYMENTS',
            title: '累计支付笔数',

        }]
    	
    	return removeJsonEle(OrgArr,[""],"field")
    }
    function getFieldIndex(fieldName){
    	var orgArr = triggerRemoveJsonEle();
    	for(var i = 0,orgArrLen = orgArr.length;i < orgArrLen;i++){
    		if(fieldName == orgArr[i]["field"]){
    			return i;
    		}
    	}
    }
    oTableInit.Init = function () {
    	if($("#btn_query").hasClass("btn-info")){
    		$("#btn_query").removeClass("btn-info").addClass("btn-default");
		}
        $('#kt_rpc').bootstrapTable({
            url: '${contextPath}/ktcount/getktRetailerPayCond2',         //请求后台的URL（*）
            method: 'POST',                      //请求方式（*）
            toolbar: '#toolbar',                //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: false,                     //是否启用排序
            idField: 'ID',
            sortName: "",
            sortOrder: "",                   //排序方式
            queryParams: oTableInit.queryParams,//传递参数（*）
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 10000,                       //每页的记录行数（*）
            pageList: [10, 50, 100,10000],        //可供选择的每页的行数（*）
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列
            showHeader:true,
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            height: 500,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle:true,                    //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            detailView: false,                   //是否显示父子表
            showFooter:true,
            parentIdField: 'PARENT_ID',
            treeShowField: '',
            columns: triggerRemoveJsonEle() ,
            contentType : "application/x-www-form-urlencoded",
            onLoadSuccess: function(data){
            	$("#btn_query").removeClass("btn-default").addClass("btn-info");
            	ISNEEDREBUILD = false;
            },
            onColumnSwitch:function(field, checked){
            	var fieldIndex = getFieldIndex(field);
            	toggleFootrowTd(fieldIndex,checked)
            }
        });
    };
    oTableInit.queryParams = function (params) {
    	var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
            limit: params.limit,   //页面大小
            offset: params.offset,  //页码
            sortName: params.sort,
            sortOrder: params.order,
            merid : $("#meridSelect").val().trim(),
	    	turnCreateDate :$("#turnCreateDate").val().trim(),
	    	bindCreateDate : $("#bindCreateDate").val().trim()
        };
        return temp;
    };
    return oTableInit;
}
var oTable = new TableInit();
$("#btn_refresh").bind('click',function(){
	if($("#btn_query").hasClass("btn-default")){
		return;
	}
	$("#btn_query").removeClass("btn-info").addClass("btn-default");
	$("#turnCreateDate").val(trans2FormatDate(new Date()));
	$("#bindCreateDate").val(trans2FormatDate(new Date()));
	$('#kt_rpc').bootstrapTable('refresh', { url: '${contextPath}/ktcount/getktRetailerPayCond2'});
})
//查询按钮点击时候出发
$("#btn_query").bind("click",function(){
	if($("#btn_query").hasClass("btn-default")){
		return;
	}
	if(ISNEEDREBUILD){
		$("#kt_rpc").bootstrapTable('destroy');
		oTable.Init();
		return;
	}
	$("#btn_query").removeClass("btn-info").addClass("btn-default");
	$('#kt_rpc').bootstrapTable('refresh', { url: '${contextPath}/ktcount/getktRetailerPayCond2'});
})
$("#summaryType").change(function(){
	ISNEEDREBUILD = true;
})

//初始化时间选择器
function initDatetimepicker(arr) {
	arr.forEach(function(item, index, input) {
		$('#' + item).datetimepicker({
			language : 'zh-CN',
			weekStart : 1,
			todayBtn : 1,
			todayHighlight : 1,
			startView : 2,
			forceParse : 0,
            hours12: false,
            showMeridian : 1,
			format : 'yyyy-mm-dd hh:ii:ss',
			autoclose : true,
			minView : "hour",
			initialDate:trans2FormatDate(new Date())
		}).on('changeDate', function(ev){
		    var idVal = $(this).attr("id");
		    var date = ev.date;
		    if(idVal == "turnCreateDate"){
		    	$("#turnCreateDate").val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":00");
		    }else{
		    	$("#bindCreateDate").val(date.getFullYear()+"-"+(date.getMonth()+1)+"-"+(date.getDate())+" "+date.getHours()+":"+date.getMinutes()+":00")
		    }
		});;
		$('#' + item).datetimepicker('setEndDate', trans2FormatDate(new Date()));
	})
	$('#turnCreateDate').val(trans2FormatDate(new Date(),false))
	$('#bindCreateDate').val(trans2FormatDate(new Date(),false))
}
//当大区改变时
function onmeridChange(){
	$("#merid").val($("#meridSelect").val().trim());

	$("#meridName").val($("#meridSelect option:selected").text().trim());
}
//时间转换
function trans2FormatDate(date,isMonth){
	//date.setDate(date.getDate() - 1);
	isMonth && date.setMonth(date.getMonth()-1);
	return date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+" "+date.getHours()+":"+date.getMinutes()+":00"
}


//导出excel
var exportExcel = function() {
	var visibleCols = $('#kt_rpc').bootstrapTable('getVisibleColumns');
	var fields = "",titles = "";
	for(var i = 0,visibleColsLen = visibleCols.length;i<visibleColsLen;i++){
		fields += visibleCols[i]["field"]+",";
		titles += visibleCols[i]["title"]+",";
	}
	$("#colsTitles").val(titles.substring(0,titles.length-1));
	$("#colsFields").val(fields.substring(0,fields.length-1));
	$("#exportExcel").submit();

}
//页面打印
function doPrint() {
	var printHtml = '';
	var width = $(".bootstrap-table").width();
	var oDateUtil = new DateUtil();
	var date = new Date();
	var formatDate = "查询区间："+oDateUtil.getRegionTime($('#turnCreateDate').val(),$('#bindCreateDate').val());
	printHtml += '<div style="width:'+width+'px;height:140px"><div style="font-size:24px;font-weight:bold;margin-top:10px;text-align:center">零售户户支付情况</div><div  style="font-size:17px;margin-top:10px;margin-bottom:5px;text-align:center">'+formatDate+'</div><div>';
	var width = $(".fixed-table-header").find("table").css("width");
	$(".fixed-table-header,.fixed-table-footer").find("table").css("width","");
	$("td,th").css({"height":"46px","font-size":"19px"});
	var containerHtml = $(".fixed-table-container").prop("outerHTML");
	$(".fixed-table-header,.fixed-table-footer").find("table").css("width",width);
	$("td,th").css({"height":"","font-size":""});
	containerHtml = containerHtml.replace(/height:\s*\d+px/,'height:auto');
	printHtml += '<div class="bootstrap-table">';
	printHtml += containerHtml;
	printHtml += '</div>';
	window.document.body.innerHTML='<div id="print">'+printHtml+'</div>';
	$("#print").print();
}
//时间显示
function timeCount(){
	var oDateUtil = new DateUtil();
	setInterval(function(){
		var date = new Date();
		var formatDate = oDateUtil.formatDate(date,"yyyy-MM-dd hh:mm:ss",true);
		$("#timeCount").html(formatDate)
	},1000)
}
</script>
</html>